<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
    .container {
      width: 60%;
      margin: 0 auto;
      height: 5000px;
    }

    #myBtn {
      display: none;
      position: fixed;
      bottom: 20px;
      right: 30px;
      z-index: 99;
      border: none;
      outline: none;
      background-color: red;
      color: white;
      cursor: pointer;
      padding: 15px;
      border-radius: 10px;
      animation: 0.8s fade; 
    }

    @keyframes fade {
      from { opacity: 0; };
      to { opacity: 1; };
    }

    #myBtn:hover {
      background-color: #555;
    }
  </style>
</head>
<body>
  <div class="container">
    <h1>HTML</h1>
    <p>万维网上的一个超媒体文档称之为一个页面（外语：page）。作为一个组织或者个人在万维网上放置开始点的页面称为主页（外语：Homepage）或首页，主页中通常包括有指向其他相关页面或其他节点的指针（超级链接），所谓超级链接，就是一种统一资源定位器（Uniform Resource Locator，外语缩写：URL）指针，通过激活（点击）它，可使浏览器方便地获取新的网页。这也是HTML获得广泛应用的最重要的原因之一。在逻辑上将视为一个整体的一系列页面的有机集合称为网站（Website或Site）。超级文本标记语言（英文缩写：HTML）是为“网页创建和其它可在网页浏览器中看到的信息”设计的一种标记语言。
网页的本质就是超级文本标记语言，通过结合使用其他的Web技术（如：脚本语言、公共网关接口、组件等），可以创造出功能强大的网页。因而，超级文本标记语言是万维网（Web）编程的基础，也就是说万维网是建立在超文本基础之上的。超级文本标记语言之所以称为超文本标记语言，是因为文本中包含了所谓“超级链接”点。</p>
    <button id="myBtn" title="返回顶部">返回顶部</button>
  </div>
  <script>
    var btn = document.getElementById('myBtn')
    var id
    function scrollCheck () {
      if (20 < document.body.scrollTop || 20 < document.documentElement.scrollTop) {
        btn.style.display = 'block'
      } else {
        btn.style.display = 'none'
      }
    }
    function goToTop () {
      id = requestAnimationFrame(function change () {
        if (document.documentElement.scrollTop == 0) {
          cancelAnimationFrame(id)
        } else {
          document.documentElement.scrollTop -= 100
          id = requestAnimationFrame(change)
        }
      })
    }
    window.onscroll = function () {
      scrollCheck()
    }
    btn.onclick = function () {
      goToTop()
    }
  </script>
</body>
</html>
